<template>
  <div class="home-container">
    <div class="home-btn-group">
      <a-button type="primary" icon="plus" @click="viewCreateProject">创建项目</a-button>
    </div>
    <div class="home-list">
      <a-spin tip="Loading..." :spinning="loading">
        <div class="home-item" v-for="(item,index) in projects" :key="index" @click="projectDetail(item.id)">
          <div class="home-item-left">
            <div class="home-item-title">
              <div class="home-item-title-text">{{ item.title }}</div>
              <div class="home-item-title-date">{{ item.date }}</div>
            </div>
            <div class="home-item-describe">
              {{ item.describe }}
            </div>
          </div>
          <div class="home-item-right">
            <a-button type="primary" @click.stop="viewUpdateProject(index)">编辑</a-button>
            <a-popconfirm title="确认删除？" @confirm.stop="deleteProject(index)">
              <a-icon slot="icon" type="question-circle-o" style="color: red"/>
              <a-button type="danger" @click.stop="()=>{}">删除</a-button>
            </a-popconfirm>
          </div>
        </div>
        <a-empty v-if="projects.length === 0" style="padding-top:50px;"/>
      </a-spin>
    </div>
    <!--创建项目表单-->
    <project-form ref="createProject" title="创建项目" :visible="createVisible" @cancel="cancelCreateProject"
                  @create="createProject"/>
    <!--编辑项目表单-->
    <project-form ref="updateProject" title="编辑项目" :visible="updateVisible" @cancel="cancelUpdateProject"
                  @create="updateProject"/>
  </div>
</template>

<script>
import ProjectForm from '@/component/ProjectForm'

export default {
  name: 'Home',
  components: { ProjectForm },
  data () {
    return {
      loading: true,
      createVisible: false,
      updateVisible: false,
      projects: []
    }
  },
  created () {
    this.projectLists()
  },
  methods: {
    // 获取项目列表
    projectLists () {
      this.loading = true
      this.$db.project.toArray().then((res) => {
        this.projects = res
        this.loading = false
      })
    },
    // 显示 创建 项目模态框
    viewCreateProject () {
      this.createVisible = true
    },
    // 显示 编辑 项目模态框
    viewUpdateProject (index) {
      this.updateVisible = true
      this.$nextTick(() => { // DOM更新后传递表单
        this.$refs.updateProject.form.setFieldsValue(this.projects[index])
      })
    },
    // 隐藏 创建 项目模态框
    cancelCreateProject () {
      this.createVisible = false
    },
    // 隐藏 编辑 项目模态框
    cancelUpdateProject () {
      this.updateVisible = false
    },
    // 点击提交 创建 项目
    createProject () {
      this.$refs.createProject.form.validateFields((err, values) => {
        if (!err) {
          values.date = new Date().toLocaleString()
          this.$db.project.add(values).then((id) => {
            this.$message.success('项目创建成功(' + id + ')')
            this.cancelCreateProject()
            this.projectLists()
          })
        }
      })
    },
    // 点击提交 编辑 项目
    updateProject () {
      this.$refs.updateProject.form.validateFields((err, values) => {
        if (!err) {
          this.$db.project.put(values).then((id) => {
            this.$message.success('项目编辑成功(' + id + ')')
            this.cancelUpdateProject()
            this.projectLists()
          })
        }
      })
    },
    // 项目详情
    projectDetail (id) {
      this.$router.push({ path: '/ProjectDetail', query: { projectId: id } })
    },
    // 删除项目
    deleteProject (index) {
      this.$db.project.delete(this.projects[index].id).then(() => {
        this.$message.success('项目删除成功(' + this.projects[index].id + ')')
        this.projectLists()
      })
    }
  }
}
</script>

<style scoped lang="less">
@homeBtnHeight: 80px;
@homeItemRight: 200px;
@homeItemHeight: 150px;
@homeItemInnerHeight: 70%;
@homeItemShadowColor: #9a9a9a;
@borderColor: #eaeaea;
.home-container {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
}

.home-btn-group {
  width: 100%;
  height: @homeBtnHeight;
  display: flex;
  align-items: flex-end;
  padding-left: 20px;
}

.home-list {
  width: 100%;
  padding: 20px;
}

.home-item {
  height: @homeItemHeight;
  border-radius: 10px;
  background-color: #F7FBFF;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  transition: 0.2s;
  cursor: pointer;
  overflow: hidden;
  box-shadow: @homeItemShadowColor 0 0 10px -5px;
}

.home-item:hover {
  box-shadow: @homeItemShadowColor 0 0 10px 1px;
}

.home-item-left {
  width: calc(100% - @homeItemRight);
  height: @homeItemInnerHeight;
  padding-left: 20px;
  display: flex;
  flex-flow: column;
  overflow: hidden;
}

.home-item-title {
  height: 40%;
  display: flex;
  align-items: center;
}

.home-item-title-text {
  width: calc(100% - 160px);
  font-size: 20px;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.home-item-title-date {
  width: 160px;
  text-align: center;
  font-size: 12px;
  color: #c2c2c2;
}

.home-item-describe {
  height: 60%;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.home-item-right {
  width: @homeItemRight;
  height: @homeItemInnerHeight;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  align-items: center;
  border-left: 1px solid @borderColor;
  overflow: hidden;
}

</style>
